<template>
  <div ref="el" class="os-host" :style="{ height: height }">
    <div class="os-resize-observer-host"></div>
    <div class="os-padding">
      <div class="os-viewport">
        <div class="os-content">
          <slot></slot>
        </div>
      </div>
    </div>
    <div class="os-scrollbar os-scrollbar-horizontal">
      <div class="os-scrollbar-track">
        <div class="os-scrollbar-handle"></div>
      </div>
    </div>
    <div class="os-scrollbar os-scrollbar-vertical">
      <div class="os-scrollbar-track">
        <div class="os-scrollbar-handle"></div>
      </div>
    </div>
    <div class="os-scrollbar-corner"></div>
  </div>
</template>


<script lang="ts">
import OverlayScrollbars from 'overlayscrollbars'
import {
  defineComponent,
  onBeforeUnmount,
  onMounted,
  PropType,
  Ref,
  ref,
} from 'vue'
import 'overlayscrollbars/css/OverlayScrollbars.css'

export default defineComponent({
  name: 'scrollbar',
  components: {},
  props: {
    //see https://kingsora.github.io/OverlayScrollbars/#!documentation/options
    options: {
      type: Object as PropType<OverlayScrollbars.Options>,
    },
    height: {
      type: String as PropType<string>,
      default: '100vh',
    },
  },
  setup(props) {
    const el: Ref<HTMLDivElement | null> = ref(null)
    let instance: OverlayScrollbars

    onMounted(() => {
      // DOM元素将在初始渲染后分配给ref
      instance = OverlayScrollbars(
        el.value as HTMLDivElement,
        props.options || {},
      )
    })

    onBeforeUnmount(() => {
      if (OverlayScrollbars.valid(instance)) {
        instance.destroy()
      }
    })

    return {
      el,
    }
  },
})
</script>
